<template>
  <div class="login">
    <div class="loginInfo">
      <div class="title">
        <div class="banner"></div>
        <span>哇塞电影 - 登录</span>
      </div>
      <div class="userAndpass">
        <span>UserName</span>
        <el-input v-model="username" placeholder="请输入用户名"></el-input>
        <br />
        <span>PassWord</span>
        <el-input
          placeholder="请输入密码"
          v-model="password"
          show-password
        ></el-input>
      </div>
      <div class="forgetPass">
        <a href="#">忘记密码?</a>
      </div>
      <div class="loginbtn">
        <el-button type="primary" @click="gotoHome">SIGN IN</el-button>
      </div>
      <div class="gotoreg">
        <a href="" @click="gotoreg">还没有账号？去注册→</a>
      </div>
    </div>
  </div>
</template>

<script>
import { Login } from "@/api/user";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    gotoreg: function () {
      this.$router.push({ name: "Register" });
    },
    gotoHome: function () {
      if (this.username == "" || this.password == "") {
        this.$message({
          message: "请输入用户名或密码",
          type: "error",
        });
        return;
      }

      const loginData = {
        username: this.username,
        password: this.password,
      };

      Login(loginData).then((res) => {
        if (res.code === 200) {
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("uid", res.data.user.id);
          this.$router.push({
            name: "index",
          });
          this.$message({
            message: "登陆成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });

      // this.$axios
      //   .post(this.$store.state.url + "/api/user/login", loginData)
      //   .then((res) => {
      //     if (res.data.code === 200) {
      //       this.$message({
      //         message: "登陆成功",
      //         type: "success",
      //       });
      //       localStorage.setItem("token", res.data.data.token);
      //       localStorage.setItem("uid", res.data.data.user.id);
      //       this.$router.push({
      //         name: "index",
      //       });
      //     }
      //   });
    },
  },
};
</script>

<style lang="less" scoped>
// 组件
.login {
  a {
    text-decoration: none;
    color: gray;
  }
  width: 100%;
  height: 100%;
  // 大盒子
  .loginInfo {
    width: 480px;
    height: 600px;
    margin: 50px auto;
    // banner和登陆提示
    .title {
      // border: 1px solid red;
      height: 100px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      // banner
      .banner {
        background-image: url("@/assets/Login/u1.png");
        width: 80px;
        height: 80px;
        background-position: center;
        background-size: cover;
      }
      // 登陆提示
      span:nth-child(2) {
        display: inline-block;
        font-size: 30px;
        line-height: 80px;
        font-weight: bold;
        margin-left: 50px;
      }
    }
    // 账号和密码框
    .userAndpass {
      margin: 0 auto;
      span {
        display: block;
        font-size: 20px;
        margin: 20px 0;
        color: gray;
      }
      // .el-input__inner {
      //   height: 50px;
      //   line-height: 50px;
      // }
    }
    .forgetPass {
      display: flex;
      justify-content: right;
      margin-top: 20px;
      font-size: 20px;
    }
    .loginbtn {
      margin-top: 20px;
      .el-button {
        width: 100%;
        height: 50px;
      }
    }
    .gotoreg {
      display: flex;
      justify-content: center;
      margin: 20px auto;
    }
  }
}
</style>